<template>
    <div class="container">
        <div
            class="left_right_container"
            style="
                width: 960px;
                height: 524px;
                display: flex;
                justify-content: center;
                align-items: center;
            "
        >
            <div class="left_Bg" style="height: 100%; width: 50%">
                <!-- <img src="./left_img.png" style="height: 100%;width:100%;" alt=""> -->
            </div>
            <div class="login_box">
                <div class="bg_text"></div>
                <div class="loginWrap">
                    <el-form
                        ref="loginForm"
                        v-loading="loading"
                        class="formCard"
                        layout="vertical"
                        :model="loginForm"
                        :rules="loginFormRules"
                        label-width="0"
                        size="small"
                    >
                        <div class="title_logo"> </div>
                        <div class="welcome" style="margin: 10px 0">
                            <p style="font-size: 30px">欢迎登录！</p>
                        </div>
                        <template v-if="passwordLogin">
                            <el-form-item label="" prop="username">
                                <p style="">用户名</p>
                                <el-input
                                    v-model.trim="loginForm.username"
                                    placeholder="请输入用户名"
                                    id="inPut"
                                >
                                </el-input>
                            </el-form-item>
                            <el-form-item label="" prop="password">
                                <p style="">账户密码</p>
                                <el-input
                                    v-model.trim="loginForm.password"
                                    type="password"
                                    placeholder="请输入账户密码"
                                    id="inPut"
                                >
                                </el-input>
                            </el-form-item>
                        </template>

                        <div class="text-operate">
                            <span></span>
                        </div>
                        <div
                            class="register"
                            style="
                                width: 100%;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                            "
                        >
                        </div>
                        <el-form-item label=" " style="height: 70px">
                            <el-button
                                type="primary"
                                style="width: 100%; height: 52px"
                                @click="handleSubmit"
                                v-loading="loadingCheck"
                            >
                                登录
                            </el-button>
                        </el-form-item>

                        <div class="register">
                            <span>还没有账号?</span> &nbsp;
                            <el-button
                                type="text"
                                @click="jumpTo"
                                class="btn-text"
                                >立即注册</el-button
                            >
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import _ from "lodash";
import { dateTimeFormat, parsswordReg, parsswordAdded } from "@utils";
import { mobileReg } from "@utils";

/* 密码校验 */
const pwdReg = parsswordReg;
const defaultCodeDisabled = 120;
export default {
    computed: {
        loginFormRules() {
            if (this.passwordLogin) {
                return {
                    username: [
                        {
                            required: true,
                            message: "请输入用户名",
                            trigger: "blur",
                        },
                    ],
                    password: [
                        {
                            required: true,
                            message: "请输入密码",
                            trigger: "blur",
                        },
                    ],
                    smsCode: [
                        {
                            required: true,
                            message: "请输入验证码",
                            trigger: "blur",
                        },
                    ],
                };
            } else {
                return {
                    mobile: [
                        {
                            required: true,
                            message: "请输入手机号",
                            trigger: "blur",
                        },
                        {
                            pattern: mobileReg,
                            message: "请输入正确手机号",
                            trigger: "blur",
                        },
                    ],
                    smsCode: [
                        {
                            required: true,
                            message: "请输入验证码",
                            trigger: "blur",
                        },
                    ],
                };
            }
        },
    },
    data() {
        return {
            dialogData: null,
            labelCol: { span: 6 },
            wrapperCol: { span: 16 },
            systemList: [],
            loading: false,
            loginForm: {
                username: "",
                password: "",
                captcha: "",
                mobile: "", // 手机号码
                smsCode: "", // 手机验证码
                // client_id: "ucfront",
            },
            pwdUpdate: {
                password: "",
                repeatPassword: "",
            },
            needSmsCode: -1, // 是否需要验证码 -1 代表没调用接口查询
            loadingCheck: false, // 加载校验
            passwordLogin: true, // 登录类型 true 账密 false 验证码
            secondNum: defaultCodeDisabled, // 倒计时
            codeDisabled: false, // 是否可以发送
            timer: null, // 定时器id
        };
    },
    mounted() {
        this.clearFun();
    },
    methods: {
        clearFun() {
            this.$store.commit("global/SET_NAV_TAB_LIST", []);
        },
        // 提交登录操作
        handleSubmit() {
            this.passwordSubmit() 
        },
        // 账号密码登录
        async passwordSubmit() {
            
            await this.$refs.loginForm.validate();

            this.loading = true;

            let lastloginStaffId = null;

            const staffId = this.loginForm.username;
            const orgPassword = this.loginForm.password;

            const { result, init } = await this.$store
                .dispatch("account/login", {
                    data: {
                        userAccount: this.loginForm.username,
                        password: this.loginForm.password,
                    },
                    headers: {
                        
                    },
                })
                .catch((err) => {
                    this.loading = false;
                    throw err;
                });
            this.loading = false;

            if (result) {

                const { sourcePath, redirectToChild } = this.$route.query;

                if (sourcePath && redirectToChild == 1) {
                    // 如果有来源，且是子系统跳转
                    window.location.href = decodeURIComponent(sourcePath);
                    return;
                }
                console.log(result, "login");
                if (sourcePath) {
                    this.$router.push(sourcePath);
                } else {
                    this.$router.push("/home");
                }
            }
        },
        //
        jumpTo() {
            this.$router.push('register')
        },
        // 切换登录方式
        handleChangeLoginType() {
            this.passwordLogin = !this.passwordLogin;
            this.$refs.loginForm.resetFields();
        },
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
};
</script>
<style lang="scss" scoped>
//noinspection CssUnknownTarget
@import "@assets/variables.scss";

.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("./login_back.png");
    // background: url("../../assets/images/login_bg.jpg");
    background-size: cover;
    overflow: auto;
    .login_box {
        height: 100%;
        width: 50%;
        display: inline-flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        background: #fff;
        //.bg_text {
        //  width: 600px;
        //  height: 100px;
        //
        //  background-image: url("./login_back_text.png");
        //  background-repeat: no-repeat;
        //  background-size: cover;
        //}
        .loginWrap {
            height: 100%;
            width: 100%;
            display: flex;

            .formCard {
                //display: inline-block;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding: 30px;
                text-align: left;
                width: 100%;
                height: 100%;

                .title {
                    text-align: center;
                    margin-bottom: 20px;
                    // color: $--color-primary;
                    color: #01ddff;
                    font-size: 20px;
                    font-weight: bold;
                }
                .title_logo {
                    display: flex;
                    justify-content: space-between;
                    // background-image: url('./title_logo.png');
                    width: 100%;
                    height: 50px;
                    background-size: contain;
                    background-origin: content-box;
                    background-repeat: no-repeat;
                    padding: 0 15%;
                    .left_logo_img {
                        width: 90%;
                    }
                }
            }
        }
    }
    .input-prefix {
        font-size: 18px;
        color: #01ddff;
        position: relative;
        top: 2px;
    }
    .split-line {
        display: inline-block;
        width: 1px;
        height: 12px;
        position: relative;
        top: 3px;
        background-color: #ddd;
        margin-right: 10px;
    }
    .btn-text {
        color: #01ddff;
    }
    .btn-text:active {
        color: #0ab1cb;
    }
    .text-operate {
        display: flex;
        justify-content: space-between;
        .el-button {
            padding-top: 0;
        }
    }

    .register {
        text-align: center;

        span {
            color: #ccc;
        }

        .el-button {
            padding-top: 0;
        }
    }
    ::v-deep #inPut {
        height: 50px;
    }
}
</style>
